<template>
    <div class="container">
        <div class="crawler_box">
            <div class="wrap" style="height:100%">
                <div class="search">
                    <div class="list">
                        <span>关键字搜索:</span>
                        <Input v-model="form.keyword" placeholder="请输入设备编号" style="width: 200px" maxlength="15" clearable />
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div >
                    <div class="list">
                        <span>硬件绑定:</span>
                        <Select v-model="form.isbind" style="width:200px;" placeholder="请选择">
                            <Option v-for="item in bindFlagList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select >
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div >
                    <div class="list">
                        <span>在线状态:</span>
                        <Select v-model="form.isonline" style="width:200px;" placeholder="请选择">
                            <Option v-for="item in netStateList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                    <div class="list">
                        <el-button type="primary" @click="onSubmit" size="small" plain>搜索</el-button>
                        <el-button type="info" @click="resetForm" style="margin-left:20px;" size="small" plain>重置</el-button>
                    </div>
                </div >
                <div class="search" style="margin-top: 10px">
                    <el-button type="primary" @click="updateRow(0)" size="small" plain :disabled="!btnList.includes('fse/crawler/device/add')">添加履带吊</el-button>
                </div>
                <div class="bottom-box">
                    <div class="table_box">
                        <el-table :data="tableList" style="width: 100%">
                            <el-table-column prop="code" label="设备编号"></el-table-column>
                            <el-table-column prop="modelName" label="设备型号"></el-table-column>
                            <el-table-column prop="operatorName" label="操作手"></el-table-column>
                            <el-table-column label="硬件绑定">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.bindFlag == 0">
                                        <span style="color:#A9B0BB">未绑定</span>
                                    </div>
                                    <div v-if="scope.row.bindFlag == 1">
                                        <span style="color:#28D79C">已绑定</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column  label="在线状态">
                                <template slot-scope="scope">
                                    <el-tag type="info" v-if="scope.row.netState == 0 && scope.row.bindFlag == 1" size="small">离线</el-tag >
                                    <el-tag type="success" v-else-if="scope.row.netState == 1 && scope.row.bindFlag == 1" size="small">在线</el-tag >
                                    <span v-else>-</span>
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="300" align="center">
                                <template slot-scope="scope">
                                    <el-button @click.native.prevent="getDetails(scope.$index, tableList,1)" :disabled="!btnList.includes('fse/crawler/device/edit')" type="text" size="small">详情</el-button>
                                    <el-button style="color:red" @click.native.prevent="remove(scope.$index, tableList)" :disabled="!btnList.includes('fse/crawler/device/delete')" type="text" size="small">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="clearfix" v-show="tableList.length > 0">
                        <div class="float-right">
                            <Page v-if="totalCount" style="margin: 20px 0;text-align: center;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <Modal v-model="addModel" title="添加履带吊" :mask-closable="false" width="1000px">
            <div class="msg" style="margin-top:15px">
                <h2>
                    <em></em>
                    <span>基本信息</span>
                </h2>
                <div class="list">
                    <div class="item">
                        <span class="tip"  style="right: -50px;">*</span>
                        <span>设备编号:</span>
                        <Input v-model="code" placeholder="请输入设备编号" :maxlength="length" show-word-limit style="width: 300px" clearable />
                    </div>
                    <div class="item">
                        <span>设备型号:</span>
                        <Input v-model="model" placeholder="请输入设备编号" :maxlength="length" show-word-limit style="width: 300px" clearable />
                    </div>
                </div>
                <div class="list">
                    <div class="item">
                        <span>制造单位:</span>
                        <Input v-model="manufacturer" placeholder="请输入制造单位" :maxlength="length" show-word-limit style="width: 300px" clearable />
                    </div>
                    <div class="item">
                        <span>出厂编号:</span>
                        <Input v-model="deliveryCode" placeholder="请输入出厂编号" :maxlength="length" show-word-limit style="width: 300px" clearable />
                    </div>
                </div>
                <div class="list">
                    <div class="item">
                        <span>出厂日期:</span>
                        <DatePicker type="date" placeholder="请选择出厂日期" style="width: 300px" format="yyyy-MM-dd" v-model="deliveryDate" :clearable="false"></DatePicker>
                    </div>
                    <div class="item">
                        <span>安拆单位:</span>
                        <Input v-model="installUnit" placeholder="请输入安拆单位" :maxlength="length" show-word-limit style="width: 300px" clearable />
                    </div>
                </div>
                <h2>
                    <em></em>
                    <span>其他信息</span>
                </h2>
                <div class="list">
                    <div class="item">
                        <span>产权单位:</span>
                        <Input v-model="propertyUnit" placeholder="请输入产权单位" :maxlength="length" show-word-limit style="width: 300px" clearable />
                    </div>
                    <div class="item">
                        <span>监测证号:</span>
                        <Input v-model="monitorNo" placeholder="请输入监测证号" :maxlength="length" show-word-limit style="width: 300px" clearable />
                    </div>
                </div>
                <div class="list">
                    <div class="item">
                        <span>备案编号:</span>
                        <Input v-model="fileNo" placeholder="请输入备案编号" style="width: 300px" clearable />
                    </div>
                    <div class="item">
                        <span>备案日期:</span>
                        <DatePicker type="date" placeholder="请选择备案日期" style="width: 300px" format="yyyy-MM-dd" v-model="fileDate" :clearable="false"></DatePicker>
                    </div>
                </div>
                <h2 style="margin-top:20px">
                    <em></em>
                    <span>操作手</span>
                    <i class="el-icon-circle-plus-outline add" style="font-size:24px;cursor: pointer" @click="addEmp" v-show="operatorList.length!==3"></i>
                </h2>
                <div class="operEmpList" v-if="operatorList.length>0">
                    <div class="item" v-for="( item ,index ) in operatorList" :key="index">
                        <div class="item_close" @click="removeEmp(index, operatorList)">
                            <Icon type="ios-close-circle" style="color:#1891FF;font-size:20px;"/>
                        </div>
                        <div class="item_emp">
                            <span>姓 名:</span>
                            <Input v-model="item.name" placeholder="请输入" style="width: 200px;" clearable />
                            <input type="password" autocomplete="new-password" style="display: none"/>
                        </div>
                        <div class="item_emp">
                            <span>电 话:</span>
                            <Input v-model="item.phone" placeholder="请输入" style="width: 200px;" clearable />
                            <input type="password" autocomplete="new-password" style="display: none"/>
                        </div>
                        <div class="item_emp">
                            <span>证件号:</span>
                            <Input v-model="item.cert" placeholder="请输入" style="width: 200px;" clearable />
                            <input type="password" autocomplete="new-password" style="display: none"/>
                        </div>
                    </div>
                </div>
                <div class="none_data" v-else style="width:98%;height:150px;margin:auto;text-align:center;line-height:150px;font-size:20px;">暂无数据</div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(0)" type="type" size="small" plain>取消</el-button>
                <el-button @click="submitAll" type="primary" size="small" plain v-preventReClick="1500">保存</el-button>
            </div>
        </Modal>

        <Modal v-model="editModel" :title="isAdd?'履带吊详情':'履带吊编辑'" width="1000px;" :mask-closable="false">
            <Tabs v-model="detailActiveName">
                <TabPane label="履带吊信息" name="1">
                    <div class="msg" v-if="isAdd">
                        <h2>
                            <em></em>
                            <span>基本信息</span>
                            <i class="el-icon-edit-outline" style="font-size:24px;margin-left:20px;color:var(--themeColor);cursor: pointer" @click="edit_btn"></i>
                        </h2>
                        <div class="list">
                            <div class="item">
                                <span>设备编号:</span>
                                <span>{{ details.code }}</span>
                            </div>
                            <div class="item">
                                <span>设备型号:</span>
                                <span>{{ details.modelName || '-' }}</span>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item">
                                <span>制造单位:</span>
                                <span>{{ details.manufacturer || '-' }}</span>
                            </div>
                            <div class="item">
                                <span>出厂编号:</span>
                                <span>{{ details.deliveryCode || '-' }}</span>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item">
                                <span>出厂日期:</span>
                                <span>{{ details.deliveryDate || '-' }}</span>
                            </div>
                            <div class="item">
                                <span>安拆单位:</span>
                                <span>{{ details.installUnit || '-' }}</span>
                            </div>
                        </div>
                        <h2>
                            <em></em>
                            <span>其他信息</span>
                        </h2>
                        <div class="list">
                            <div class="item">
                                <span>产权单位:</span>
                                <span>{{ details.propertyUnit || '-' }}</span>
                            </div>
                            <div class="item">
                                <span>监测证号:</span>
                                <span>{{ details.monitorNo || '-' }}</span>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item">
                                <span>备案编号:</span>
                                <span>{{ details.fileNo || '-' }}</span>
                            </div>
                            <div class="item">
                                <span>备案日期:</span>
                                <span>{{ details.fileDate || '-' }}</span>
                            </div>
                        </div>
                        <h2>
                            <em></em>
                            <span>操作手信息</span>
                        </h2>
                        <div class="operatorList" v-if="details.operatorList.length>0">
                            <div class="item" v-for="(item , index) in details.operatorList" :key="index">
                                <div class="img">
                                    <img :src="peoImg" alt="" style="width:100%;height:100%" />
                                </div>
                                <div class="operEmpInfo">
                                    <div class="itemInfo">
                                        <span>姓名</span>
                                        <span>{{ item.name ? item.name : '—' }}</span>
                                    </div>
                                    <div class="itemInfo">
                                        <span>电话</span>
                                        <span>{{ item.phone ? item.phone : '—' }}</span>
                                    </div>
                                    <div class="itemInfo">
                                        <span>证件</span>
                                        <span>{{ item.cert ? item.cert : '—' }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="none_data" v-else style="width:98%;height:150px;margin:auto;text-align:center;line-height:150px;font-size:20px;">
                            暂无数据
                        </div>
                    </div>
                    <div class="msg" v-if="!isAdd">
                        <h2>
                            <em></em>
                            <span>基本信息</span>
                        </h2>
                        <div class="list">
                            <div class="item">
                                <span class="tip">*</span>
                                <span>设备编号:</span>
                                <Input v-model="code" placeholder="请输入设备编号" :maxlength="length" show-word-limit style="width: 300px" clearable />
                            </div>
                            <div class="item">
                                <span>设备型号:</span>
                                <Input v-model="model" placeholder="请输入设备编号" :maxlength="length" show-word-limit style="width: 300px" clearable />
                            </div>
                        </div>
                        <div class="list">
                            <div class="item">
                                <span>制造单位:</span>
                                <Input v-model="manufacturer" placeholder="请输入制造单位" :maxlength="length" show-word-limit style="width: 300px" clearable />
                            </div>
                            <div class="item">
                                <span>出厂编号:</span>
                                <Input v-model="deliveryCode" placeholder="请输入出厂编号" :maxlength="length" show-word-limit style="width: 300px" clearable />
                            </div>
                        </div>
                        <div class="list">
                            <div class="item">
                                <span>出厂日期:</span>
                                <DatePicker type="date" placeholder="请选择出厂日期" style="width: 300px" format="yyyy-MM-dd" v-model="deliveryDate" @on-change="changeData" :clearable="false"></DatePicker>
                            </div>
                            <div class="item">
                                <span>安拆单位:</span>
                                <Input v-model="installUnit" placeholder="请输入安拆单位" :maxlength="length" show-word-limit style="width: 300px" clearable />
                            </div>
                        </div>
                        <h2>
                            <em></em>
                            <span>其他信息</span>
                        </h2>
                        <div class="list">
                            <div class="item">
                                <span>产权单位:</span>
                                <Input v-model="propertyUnit" placeholder="请输入产权单位" :maxlength="length" show-word-limit style="width: 300px" clearable />
                            </div>
                            <div class="item">
                                <span>监测证号:</span>
                                <Input v-model="monitorNo" placeholder="请输入监测证号" :maxlength="length" show-word-limit style="width: 300px" clearable />
                            </div>
                        </div>
                        <div class="list">
                            <div class="item">
                                <span>备案编号:</span>
                                <Input v-model="fileNo" placeholder="请输入备案编号" style="width: 300px" clearable />
                            </div>
                            <div class="item">
                                <span>备案日期:</span>
                                <DatePicker type="date" placeholder="请选择备案日期" style="width: 300px" format="yyyy-MM-dd" v-model="fileDate" :clearable="false" @on-change="changeTime"></DatePicker>
                            </div>
                        </div>
                        <h2 style="margin-top:20px">
                            <em></em>
                            <span>操作手</span>
                            <i class="el-icon-circle-plus-outline add" style="font-size:24px;cursor: pointer" @click="addEmp" v-show="operatorList.length!==3"></i>
                        </h2>
                        <div class="operEmpList" v-if="operatorList.length>0">
                            <div class="item" v-for="( item ,index ) in operatorList" :key="index">
                                <div class="item_close" @click="removeEmp(index, operatorList)">
                                    <Icon type="ios-close-circle" style="color:var(--themeColor);font-size:20px;"/>
                                </div>
                                <div class="item_emp">
                                    <span>姓 名:</span>
                                    <Input v-model="item.name" placeholder="请输入" style="width: 200px;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none"/>
                                </div>
                                <div class="item_emp">
                                    <span>电 话:</span>
                                    <Input v-model="item.phone" placeholder="请输入" style="width: 200px;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none"/>
                                </div>
                                <div class="item_emp">
                                    <span>证件号:</span>
                                    <Input v-model="item.cert" placeholder="请输入" style="width: 200px;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none"/>
                                </div>
                            </div>
                        </div>
                        <div class="none_data" v-else style="width:98%;height:150px;margin:auto;text-align:center;line-height:150px;font-size:20px;">
                            暂无数据
                        </div>
                    </div>
                </TabPane>
                <TabPane label="履带吊监测" name="2">
                    <div class="msg">
                        <h2>
                            <em></em>
                            <span>硬件信息</span>
                        </h2>
                        <div class="list">
                            <div class="item">
                                <span style="width:70px;white-space:nowrap">硬件SN：</span>
                                <span style="width:250px;margin:0px 25px" v-if="snFlag == 1 || snFlag == 3">{{ sn }}</span>
                                <span style="width:250px" v-if="snFlag == 1 || snFlag == 3">{{ platformText }}</span>
                                <Input v-model="bound_sn" placeholder="请输入硬件SN码" style="width:250px;margin:0px 10px;" v-if="snFlag == 2" clearable />
                                <el-button type="primary" size="small" plain v-if="snFlag == 1" @click="boundRow">绑定
                                </el-button>
                                <Select v-model="platform" style="width:250px;margin-right:10px;" placeholder="请选择平台" v-if="snFlag == 2">
                                    <Option v-for="item in platformList" :value="item.platform" :key="item.platform">
                                        {{ item.name }}
                                    </Option>
                                </Select>
                                <el-button type="primary" size="small" plain v-if="snFlag == 2" @click="boundSumbit">
                                    确定
                                </el-button>
                                <el-button type="info" size="small" plain @click="cancel(5)" v-if="snFlag == 2">取消
                                </el-button>
                                <el-button type="primary" size="small" plain v-if="snFlag == 3" @click="unbindRow">解绑
                                </el-button>
                            </div>
                        </div>
                        <h2>
                            <em></em>
                            <span>硬件状态</span>
                        </h2>
                        <div class="list">
                            <div class="item">
                                <span>在线状态:</span>
                                <span v-if="details.netState == 0 &&snFlag == 3">离线</span>
                                <span v-else-if="details.netState == 1 &&snFlag == 3">在线</span>
                                <span v-else>-</span>
                            </div>
                        </div>
                    </div>
                </TabPane>
                <TabPane label="履带吊视频" name="3">
                    <div class="msg">
                        <h2>
                            <em></em>
                            <span>视频信息</span>
                            <i class="el-icon-edit-outline" style="font-size:24px;margin-left:20px;color:var(--themeColor);cursor: pointer" @click="editFvs" v-if="!fvsFlag"></i>
                        </h2>
                        <div class="list" v-for="(item,index) in crawlerTypeList" :key="index">
                            <div class="item">
                                <span>{{ item.name }}:</span>
                                <span v-if="!fvsFlag" style="flex:1">{{ item.fvsDeviceName }}</span>
                                <Cascader :data="fvsList" v-model="item.type" filterable trigger="hover" placeholder="请选择摄像头" style="width:250px;" v-if="fvsFlag"></Cascader>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item">
                                <el-button @click="cancel(6)" type="type" size="small" plain v-if="fvsFlag">取消</el-button>
                                <el-button @click="submitFvs" type="primary" size="small" plain v-preventReClick="1500" v-if="fvsFlag">保存</el-button>
                            </div>
                        </div>
                    </div>
                </TabPane>
            </Tabs>
            <div slot="footer">
                <el-button @click="cancel(1)" type="type" size="small" plain v-if="!isAdd&&detailActiveName==1">取消</el-button>
                <el-button @click="submitAll" type="primary" size="small" plain v-preventReClick="1500" v-if="!isAdd&&detailActiveName==1">保存</el-button>
            </div>
        </Modal>

        <Modal v-model="deleteModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px;padding:16px;">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(2)" type="info" size="small" plain>取消</el-button>
                <el-button @click="deteleRow" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="unbindModal" title="解绑设备" width="360px;" :mask-closable="false">
            <div style="margin:10px;padding:16px;">确定要解绑这台设备？</div>
            <div slot="footer">
                <el-button @click="cancel(3)" type="info" size="small" plain>取消</el-button>
                <el-button @click="unbind" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import moment from 'moment';
import {
    getcrawlerList,//获取履带吊
    getcrawlerAdd,//添加履带吊
    getcrawlerEdit,//编辑履带吊
    getcrawlertDel,//删除履带吊
    getcrawlerbind,//绑定硬件
    getcrawlerunbind,//解绑硬件
    getcrawlerdetail,
    getCrawlerBindFvs,//履带吊详情
} from "@/api/crawler";
import {getHardwarePlatform} from "@/api/api";
import {initFvsList} from "@/mixins/fvs";

export default {
    mixins: [initFvsList],
    data() {
        return {
            peoImg: require("./../../../assets/images/common/noPeo.png"),
            deptId: '',
            deptName: '',
            form: {
                keyword: '',
                isbind: '',
                isonline: '',
            },
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: "",
            tableList: [],//表格数据
            addModel: false,//添加弹框
            editModel: false,//编辑弹框
            deleteModal: false,//删除弹框
            unbindModal: false,//绑定弹框
            isAdd: false,
            operatorList: [],//操作手列表
            code: "",
            model: "",
            modelName: "",
            manufacturer: "",
            deliveryCode: "",
            deliveryDate: "",
            installUnit: '',
            propertyUnit: "",
            monitorNo: "",
            fileNo: "",
            fileDate: "",
            length: 16,
            detailActiveName: "1",
            detailsIndex: '',
            detailsRows: [],
            crawlerId: '',//履带吊id
            btnList: "",
            details: {
                code: "",
                modelName: "",
                manufacturer: "",
                deliveryCode: "",
                deliveryDate: "",
                installUnit: "",
                propertyUnit: "",
                monitorNo: "",
                fileNo: "",
                fileDate: "",
                bindFlag: "",
                operatorList: [],
                netState: "",
            },
            snFlag: 0,
            boundId: '',
            sn: '',
            removeID: '',
            bound_sn: '',
            fvsFlag: false,
            platformText: '',
            platform: '', //硬件平台
            platformList: [],
            crawlerTypeList: [
                {
                    id: 1,
                    name: "大臂",
                    fvsDeviceName: '-',
                    fvsDeviceId: "",
                    type: [],
                },
                {
                    id: 2,
                    name: "前视",
                    fvsDeviceName: '-',
                    fvsDeviceId: "",
                    type: [],
                },
                {
                    id: 3,
                    name: "后视",
                    fvsDeviceName: '-',
                    fvsDeviceId: "",
                    type: [],
                },
                {
                    id: 4,
                    name: "卷扬",
                    fvsDeviceName: '-',
                    fvsDeviceId: "",
                    type: [],
                }
            ],
            bindFlagList: [
                {
                    name: "未绑定",
                    id: 0,
                },
                {
                    name: "已绑定",
                    id: 1,
                }
            ],
            netStateList: [
                {
                    name: "离线",
                    id: 0,
                },
                {
                    name: "在线",
                    id: 1,
                }
            ],
        }
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.deptName = val.name
                this.pageNum = 1;
                this.keyWord = "";
                this.current = 1;
                this.getAllList();
            }
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.deptName = this.$store.state.porjectObject.name;
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.getAllList();
        this.getFvsList()
        this.getHardwarePlat(18)
    },
    methods: {
        changeTime(time){
            this.fileDate=time
        },
        changeData(time){
            this.deliveryDate=time
        },
        getHardwarePlat(type) {
            let params = {
                deviceType: type
            };
            getHardwarePlatform(params)
                .then(res => {
                    if (res.code == 200) {
                        let list = res.data.list || [];
                        this.platformList = list;
                        if (this.platformList) {
                            this.platform = this.platformList[0].platform
                        }
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //重置
        resetForm() {
            this.form.keyword = ''
            this.form.isbind = ''
            this.form.isonline = ''
            this.getAllList();
        },
        //取消
        cancel(type) {
            if (type == 0) {
                this.addModel = false;
            } else if (type == 1) {
                this.isAdd = true;
                this.getDetails(this.detailsIndex, this.detailsRows, 1)
            } else if (type == 2) {
                this.deleteModal = false;
            } else if (type == 3) {
                this.unbindModal = false;
            } else if (type == 5) {
                this.snFlag = 1;
            } else if (type == 6) {
                this.fvsFlag = false;
                this.getDetails(this.detailsIndex, this.detailsRows, 3)
            }
        },
        //分页
        pageChange(index) {
            this.pageNum = index;
            this.getAllList();
        },
        changebind(e) {
            this.form.isbind = e
        },
        changeonline(e) {
            this.form.isonline = e
        },
        //搜索
        onSubmit() {
            this.getAllList();
        },
        //获取履带吊设备
        getAllList() {
            let params = {
                deptId: this.deptId,
                keyword: this.form.keyword,
                bindFlag: this.form.isbind,
                netState: this.form.isonline,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            }
            getcrawlerList(params).then(res => {
                if (res.code == 200) {
                    this.tableList = res.data.list
                    this.detailsRows = this.tableList;
                    for (let i in this.tableList) {
                        let operEmpNameStr = [];
                        if (this.tableList[i].operatorList.length > 0) {
                            for (let j in this.tableList[i].operatorList) {
                                operEmpNameStr.push(this.tableList[i].operatorList[j].name);
                                this.tableList[i]["operatorName"] = operEmpNameStr.join(",");
                            }
                        } else {
                            this.tableList[i]["operatorName"] = "-"
                        }
                    }
                    this.totalCount = res.data.total;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error => {
                console.log(error);
            });
        },
        //获取列表数据详情
        getDetails(index, rows, type) {
            this.isAdd = true;
            this.detailActiveName = String(type)
            this.detailsIndex = index;
            this.crawlerId = rows[index].crawlerId;
                getcrawlerdetail(this.crawlerId).then(res=>{
                if(res.code == 200) {
                    this.editModel = true;
                    this.details.code = res.data.code;
                    this.details.modelName = res.data.modelName;
                    this.details.manufacturer = res.data.manufacturer;
                    this.details.deliveryCode = res.data.deliveryCode;
                    this.details.deliveryDate = res.data.deliveryDate;
                    this.details.installUnit = res.data.installUnit;
                    this.details.propertyUnit = res.data.propertyUnit;
                    this.details.monitorNo = res.data.monitorNo;
                    this.details.fileNo = res.data.filingNo;
                    this.details.fileDate = res.data.filingDate;
                    this.details.bindFlag = res.data.bindFlag;
                    this.details.netState = res.data.netState;
                    this.details.operatorList = res.data.operatorList;
                    if (res.data.sn && res.data.platform) {
                        this.sn = res.data.sn;
                        this.platform = res.data.platform
                        let platformText = res.data.platform
                        let itemValue = this.platformList.find(item => {
                            return item.platform == platformText
                        })
                        this.platformText = itemValue.name
                        this.snFlag = 3;
                    } else {
                        this.sn = "-";
                        this.platformText = "-"
                        this.snFlag = 1;
                    }
                    this.crawlerTypeList.forEach(i => {
                        i.type = [];
                        i.fvsDeviceId = "";
                        i.fvsDeviceName = "-";
                    })
                    if(res.data.fvsList){
                        for (let i = 0; i < res.data.fvsList.length; i++) {
                        for (let j = 0; j < this.crawlerTypeList.length; j++) {
                            if (res.data.fvsList[i].part == this.crawlerTypeList[j].id) {
                                this.crawlerTypeList[j].fvsDeviceId = res.data.fvsList[i].fvsDeviceId;
                                this.crawlerTypeList[j].fvsDeviceName = res.data.fvsList[i].fvsDeviceName;
                            }
                        }
                    }
                    }
                    for (let i = 0; i < this.fvsDeviceList.length; i++) {
                        for (let j = 0; j < this.crawlerTypeList.length; j++) {
                            if (this.fvsDeviceList[i].id == this.crawlerTypeList[j].fvsDeviceId) {
                                this.crawlerTypeList[j].type = [this.fvsDeviceList[i].groupId, this.fvsDeviceList[i].id];
                                this.crawlerTypeList[j].fvsDeviceName = this.fvsDeviceList[i].groupName + "/" + this.fvsDeviceList[i].name;
                            }
                        }
                    }
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error => {
                console.log(error)
            })
        },
        //删除履吊带
        remove(index, rows) {
            this.removeID = rows[index].crawlerId;
            this.deleteModal = true;
        },
        deteleRow() {
            getcrawlertDel(this.removeID)
                .then(res => {
                    if (res.code == 200) {
                        this.deleteModal = false;
                        this.$Message.success("操作成功");
                        this.getAllList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //添加操作手
        addEmp() {
            let obj = {};
            this.operatorList.push(obj)
        },
        //删除操作手职位
        removeEmp(index) {
            this.operatorList.splice(index, 1);
        },
        //编辑
        edit_btn() {
            this.isAdd = false;
            this.updateRow(1, this.detailsIndex, this.detailsRows)
        },
        //添加履带吊
        updateRow(type, index, rows) {
            if (type == 0) {
                this.isAdd = true;
                this.code = "";
                this.model = "";
                this.manufacturer = "";
                this.deliveryCode = "";
                this.deliveryDate = "";
                this.installUnit = "";
                this.propertyUnit = "";
                this.monitorNo = "";
                this.fileNo = "";
                this.fileDate = "";
                this.operatorList = [];
                this.addModel = true;
            } else if (type == 1) {
                this.isAdd = false;
                this.code = rows[index].code;
                this.crawlerId = rows[index].crawlerId;
                this.model = rows[index].modelName;
                this.manufacturer = rows[index].manufacturer;
                this.deliveryCode = rows[index].deliveryCode;
                this.deliveryDate = rows[index].deliveryDate;
                this.installUnit = rows[index].installUnit;
                this.propertyUnit = rows[index].propertyUnit;
                this.monitorNo = rows[index].monitorNo;
                this.fileNo = rows[index].filingNo;
                this.fileDate = rows[index].filingDate;
                this.operatorList = rows[index].operatorList;
            }
        },
        //提交添加信息
        submitAll() {
            if (this.code == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "设备编号不能为空"
                });
                return;
            }
            if (this.operatorList.length > 0) {
                for (let i in this.operatorList) {
                    if (this.operatorList[i].name == "" || this.operatorList[i].cert == "" || this.operatorList[i].name == undefined || this.operatorList[i].cert == undefined) {
                        this.$Modal.warning({
                            title: "您有必填字段",
                            content: "操作手姓名或操作手证书不能为空"
                        });
                        return;
                    }
                    if (this.operatorList[i].phone != "") {
                        if (!/^1[3456789]\d{9}$/.test(this.operatorList[i].phone)) {
                            this.$Modal.warning({
                                title: "您有必填提示字段",
                                content: "请填写正确的操作手手机号"
                            });
                            return;
                        }
                    }
                }
            }
            let deliveryDate, filingDate;
            if (!this.deliveryDate || this.deliveryDate == "") {
                deliveryDate = ""
            } else {
                deliveryDate = moment(this.deliveryDate).format('YYYY-MM-DD')
            }
            if (!this.fileDate || this.fileDate == "") {
                filingDate = "";
            } else {
                filingDate = moment(this.fileDate).format('YYYY-MM-DD')
            }
            let params = {
                deptId: this.deptId,
                deptName: this.deptName,
                code: this.code,
                modelName: this.model,
                manufacturer: this.manufacturer,
                deliveryCode: this.deliveryCode,
                deliveryDate: deliveryDate,
                propertyUnit: this.propertyUnit,
                installUnit: this.installUnit,
                monitorNo: this.monitorNo,
                filingNo: this.fileNo,
                filingDate: filingDate,
                operatorList: this.operatorList
            };
            if (this.isAdd) {
                getcrawlerAdd(params).then(res => {
                    if (res.code == 200) {
                        this.success();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(error => {
                    console.log(error);
                });
            } else {
                params.crawlerId = this.crawlerId
                getcrawlerEdit(params).then(res => {
                    if (res.code == 200) {
                        this.success();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(error => {
                    console.log(error);
                });
            }
        },
        success() {
            this.$Message.success("操作成功");
            this.pageNum = this.isAdd ? 1 : this.pageNum;
            this.current = this.isAdd ? 1 : this.current;
            if (this.isAdd) {
                this.addModel = false;
            } else {
                this.isAdd = !this.isAdd;
                this.getDetails(this.detailsIndex, this.detailsRows, 1);
            }
            this.keyWord = "";
            this.getAllList();
        },
        boundRow() {
            this.bound_sn = "";
            this.snFlag = 2
            this.boundId = this.detailsRows[this.detailsIndex].crawlerId;
        },
        boundSumbit() {
            if (this.bound_sn == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请输入设备SN码"
                });
                return;
            }
            let params = {
                crawlerId: this.boundId,
                sn: this.bound_sn,
                platform: this.platform
            };
            getcrawlerbind(params)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.getDetails(this.detailsIndex, this.detailsRows, 2);
                        this.getAllList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        unbindRow() {
            this.boundId = this.detailsRows[this.detailsIndex].crawlerId;
            this.unbindModal = true;
        },
        unbind() {
            getcrawlerunbind(this.boundId)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.unbindModal = false;
                        this.getDetails(this.detailsIndex, this.detailsRows, 2);
                        this.getAllList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        submitFvs() {
            let arr = [];
            this.crawlerTypeList.forEach(i => {
                if (i.type.length > 0) {
                    let obj = {
                        part: i.id,
                        fvsDeviceId: i.type[1],
                        fvsDeviceName: '',
                    }
                    arr.push(obj);
                }
            })
            for (let i = 0; i < arr.length; i++) {
                for (let j = 0; j < this.fvsDeviceList.length; j++) {
                    if (arr[i].fvsDeviceId == this.fvsDeviceList[j].id) {
                        arr[i].fvsDeviceName = this.fvsDeviceList[j].name;
                    }
                }
            }
            for (let s = 0; s < arr.length; s++) {
                for (let v = s + 1; v < arr.length; v++) {
                    if (arr[s].fvsDeviceId == arr[v].fvsDeviceId) {
                        this.$Modal.warning({
                            title: "提示",
                            content: "摄像头重复"
                        });
                        return;
                    }
                }
            }
            let params = {
                fseId: this.detailsRows[this.detailsIndex].crawlerId,
                fvsList: arr
            }
            getCrawlerBindFvs(params).then(res => {
                if (res.code == 200) {
                    this.fvsFlag = false;
                    this.$Message.success("操作成功");
                    this.getDetails(this.detailsIndex, this.detailsRows, 3)
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error => {
                console.log(error)
            })
        },
        editFvs() {
            this.fvsFlag = true;
            if (this.detailActiveName == '4') {
                let obj = this.device_install;
                for (const key in obj) {
                    this.submit_device_install[key] = obj[key];
                }
            }
        },
    }
};
</script>

<style scoped lang="less">
@import "../../../assets/style/themeBase.less";
</style>

<style scoped lang="scss">
@import "./../../../assets/style/fse_msg.less";

@function pxToRem($val) {
    @return $val/100 + rem;
}
>>>.ivu-input:hover {
    border-color: var(--themeColor);
}
>>>.ivu-input:focus {
    border-color: var(--themeColor);
    outline: 0;
    box-shadow: none;
}
>>>.ivu-select-selection-focused, >>>.ivu-select-selection:hover {
    border-color: var(--themeColor);
}
.container {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #F5F5F5;
    .crawler_box {
        flex: 1;
        height: 100%;
        overflow: hidden;
        .wrap {
            background: #FFFFFF;
            border-radius: 4px;
            padding: pxToRem(20);
            .search {
                width: 100%;
                margin: 0 auto;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                .item1 {
                    margin-right: 20px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    span {
                        width: 70px;
                    }
                }
                .list{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin-right: 20px;
                    span{
                        width: 90px;
                    }
                }
            }
            .bottom-box{
                width: 100%;

                .table_box {
                    width: 100%;
                    height:pxToRem(570);
                    overflow-y: auto;
                    margin-top: 20px;
                }

                .table_box::-webkit-scrollbar { /*滚动条整体样式*/
                    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
                    height: 10px;
                }

                .table_box::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
                    border-radius: 10px;
                    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                    background: #5778E8;
                }

                .table_box::-webkit-scrollbar-track { /*滚动条里面轨道*/
                    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                    border-radius: 10px;
                    background: #EDEDED;
                }
            }
        }

    }
}
</style>
